<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <h1 class="loginTitle">用户登录</h1>
      </div>
      <!-- 登录表单区域 -->
      <el-form ref="loginForm" :model="loginForm" :rules="fieldRules" label-width="0px"
        class="login_form">
        <!-- 用户名 -->
        <el-form-item prop="account">
          <el-input v-model="loginForm.account" prefix-icon="iconfont icon-user" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item >
        <el-col :span="12">
          <el-form-item prop="captcha">
            <el-input type="test" v-model="loginForm.captcha" @keyup.enter.native="login" auto-complete="off" placeholder="验证码, 单击图片刷新"
              style="width: 100%;">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">&nbsp;</el-col>
        <el-col :span="11">
          <el-form-item>
              <img style="width: 100%;cursor:pointer" class="pointer" :src="loginForm.src" @click="refreshCaptcha">
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie"
export default {
  data() {
    return {
      RandCode: '1234',
      loginForm: {
        account: '',
        password: '',
        captcha:'',
        src: '',
      },
      fieldRules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      checked: true
    }
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetLoginForm() {
      this.$nextTick(()=>{
        this.$refs.loginForm.resetFields()
      })
    },
    // 登录
    login() {
      // this.$router.push('/home')
      console.log(sessionStorage.getItem('verifykey'));
      this.loading = true
      let userInfo = {userAcc:this.loginForm.account, password:this.loginForm.password, verificationCode:this.loginForm.captcha,verifyKey:sessionStorage.getItem('verifykey')}
      console.log(userInfo)
      this.$api.login.login(userInfo).then((res) => {
        console.log(res)
          if(res.code != 200) {
            this.$message({
              message: res.msg,
              type: 'error',
            })
            this.refreshCaptcha()
          } else {
            Cookies.set('token', res.data.token) // 放置token到Cookie
            sessionStorage.setItem('user', res.data.tUser.userName) // 保存用户到本地会话
            sessionStorage.setItem('userId', res.data.tUser.userId) // 保存用户到本地会话
            this.$router.push('/home')  // 登录成功，跳转到主页
          }
          this.loading = false
        }).catch((res) => {
          this.$message({
          message: res.message,
          type: 'error'
          })
        });
    },
    // 获取验证码
    refreshCaptcha: function(){
      // this.loginForm.src = this.global.baseUrl + "/kysj/login/getVerify?t=" +new Date().getTime(); 
      this.$api.login.getVerify().then((res) => {
        console.log(res)
        var blob = new Blob([res.data], { type: 'image/jpeg' }); //返回的是一个blob对象
        const src = window.URL.createObjectURL(blob); //静态方法会创建一个 DOMString
        sessionStorage.setItem('verifykey', res.headers.verifykey)
        this.loginForm.src = src
      })
    },
  },
  created:function () {
    this.$emit('footer', false);
    this.$emit('header', false);
    this.refreshCaptcha()
  }
}
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 380px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    width: 100%;
    height: 90px;
    padding: 0 0px;
    // background-color: rgb(100, 14, 14);
    .loginTitle {
      width: 100%;
      height: 100%;
      line-height: 90px;
      text-align: center;
      font-size: 26px;
      color: #2B4B6B;
    }
  }

  .login_form {
    // position: absolute;
    bottom: 10;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .btns {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
  